//文档加载事件
window.addEventListener('load', function() {
    //banner轮播图
    new Swiper('.swiper', {
            loop: true, // 循环模式选项
            autoplay: true,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
        })
        // 数据渲染基础
    let apiData = [{
            imgUrl: './imgs/api01.svg',
            title: '生活服务'
        },
        {
            imgUrl: './imgs/api02.svg',
            title: '金融科技'
        },
        {
            imgUrl: './imgs/api03.svg',
            title: '交通地理'
        },
        {
            imgUrl: './imgs/api04.svg',
            title: '充值缴费'
        },
        {
            imgUrl: './imgs/api05.svg',
            title: '数据智能'
        },
        {
            imgUrl: './imgs/api06.svg',
            title: '企业工商'
        },
        {
            imgUrl: './imgs/api07.svg',
            title: '应用开发'
        },
        {
            imgUrl: './imgs/api08.svg',
            title: '电子商务'
        },
        {
            imgUrl: './imgs/apic1.svg',
            title: '吃喝玩乐'
        },
        {
            imgUrl: './imgs/apic2.svg',
            title: '文娱视频'
        }

    ];
    let apiHtml = '';
    apiData.forEach(function(v) {
        apiHtml += `
        <li>
                    <img src="${v.imgUrl}" alt="">
                    <p>${v.title}</p>
                </li>
                `
    })
    apiList.innerHTML = apiHtml;
    // 获取元素
    let liDom = document.querySelectorAll('#apiList li');
    let oldSrc = '';
    liDom.forEach(function(v) {
        v.addEventListener('mouseover', function() {
            this.style.backgroundColor = '#2f7ee9';
            this.lastElementChild.style.color = '#fff';
            // 获取地址
            let imgUrl = this.firstElementChild.src;
            oldSrc = imgUrl;
            // 获取后面的索引值,从后往前数
            let index = imgUrl.lastIndexOf('/');
            // 从指定索引截取后面所有字符串
            let newUrl = imgUrl.substring(index + 1);
            this.firstElementChild.src = `./imgs/${newUrl.split('.')[0]}-c.svg`
        })
        v.addEventListener('mouseout', function() {
            this.style.backgroundColor = '';
            this.lastElementChild.style.color = '';
            this.firstElementChild.src = oldSrc;
        })

    })

    let itmesDom = document.querySelectorAll('#unicorn .items');
    let index = 0;
    itmesDom[index].style.display = 'block';
    this.window.setInterval(function() {
        itmesDom[index].style.display = 'none';
        index++;
        if (index == itmesDom.length) {
            index = 0;
        }
        itmesDom[index].style.display = 'block';
    }, 2000)
})